﻿html,body {
  width: 100%;
  height: 100%;
  overflow:hidden;
}
body {

  background: url("../../Resource/img/home.png") no-repeat;
  background-position: center center;
  background-attachment: fixed;
  background-size: 100% 100%;
}
.head {
    width: 90%;
    margin: 100px 0;
    padding-left: 10%;
}
.head p {
    color: #fff;
    display: inline-block;
}

.content {
  text-align: center;
}

  .content p {
    font-size: 21px;
    color: #fff;
    margin-top: 20px;
    font-weight: bold;
    letter-spacing: 3px;
    position:absolute;
    bottom:25%;
    left:0;
    text-align:center;
    width:100%;
  }
 

.main_left {
  width: 22%;
  background: url("../../Resource/img/1.png") no-repeat;
  float: left;
  margin-left: 17%;
  background-size: 100% 100%;
  min-height: 472px;
  position: relative;
}
  
.main_in {
  width: 24%;
  background: url("../../Resource/img/2.png") no-repeat;
  float: left;
  background-size: 100% 100%;
  min-height: 502px;
  position: relative;
}
  .main_in p {
    font-size: 28px;
  }
.main_right {
  width: 20%;
  background: url("../../Resource/img/3.png") no-repeat;
  float: left;
  background-size: 100% 100%;
  min-height: 472px;
  position: relative;
}



  .main_left img, .main_right img, .main_in img {
    margin: 25% auto;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

.main_in img {
  margin: 15% auto;
}

@media screen and ( max-width: 1600px ) {
  .main_left, .main_right {
    min-height:400px;
  }
  .main_in {
    min-height: 420px;
  }
    .main_left img, .main_right img, .main_in img {
      margin: 20% auto;
    }
    .main_in img {
      margin: 13% auto;
    }
}

@media screen and ( max-width: 1300px ) {
  .main_left, .main_right {
    min-height: 320px;
    width: 20%;
  }

  .main_in {
    min-height: 360px;
    width: 24%;
  }

    .main_left img, .main_right img, .main_in img{
      width:50%;
      margin:25% auto;
    }
    .main_in img {
      margin: 15% auto;
    }
}


@media screen and ( max-width: 1200px ) {
  .main_left, .main_right {
    min-height: 320px;
    width: 23%;
  }

  .main_in {
    min-height: 350px;
    width: 27%;
  }

    .main_left img, .main_right img, .main_in img {
      width: 50%;
      margin: 25% auto;
    }

    .main_in img {
      margin: 15% auto;
    }
}